<template>
    <van-sticky z-index="100">
        <van-nav-bar
            title="邮箱认证"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <div class="user">
        <div class="user-image">
            <img :src="business.avatar" alt="">
        </div>
    </div>

    <div class="form">
        <van-form @submit="onCheck">
            <van-field
                v-model="business.email"
                name="email"
                label="邮箱"
                placeholder="邮箱"
                label-align="right"
                colon
                readonly
            />

            <van-field
                v-model="code"
                name="code"
                center
                clearable
                label="验证码"
                placeholder="请输入验证码"
                label-align="right"
                colon
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
                <template #button>
                    <van-button size="small" type="primary" v-show="showBtn" @click="onSend">发送验证码</van-button>

                    <van-count-down format="ss" :auto-start="false" :time="time" v-show="showTime" @finish="onFinish" ref="countDownRef" />
                    <div v-show="showTime">s</div>

                </template>
            </van-field>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue';

const { proxy } = getCurrentInstance();
const business = ref(proxy.$cookies.get('business') ? proxy.$cookies.get('business') : {});
const code = ref('');
const time = ref(10 * 1000);
const showBtn = ref(true);
const showTime = ref(false);
const countDownRef = ref(null);

const onCheck = async (value) => {
    value.busid = business.value.id;

    let result = await proxy.$api.emailCheck(value);

    if(result.code === 1)
    {
        proxy.$showNotify({
            type:'success',
            message:result.msg,
            duration:1500,
            onClose:() => {
                proxy.$router.go(-1);
            }
        });

        return;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
        });

        return;
    }
}

const onSend = async () => {
    // 组装数据
    let data = {
        busid:business.value.id,
        email:business.value.email
    }

    let result = await proxy.$api.emailSend(data);

    if(result.code === 1)
    {
        proxy.$showNotify({
            type:'success',
            message:result.msg,
            duration:1500,
            onClose:() => {
                showBtn.value = false;
                showTime.value = true;
                countDownRef.value.start();
            }
        });

        return;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
        });

        return;
    }
}

const onFinish = () => {
    showBtn.value = true;
    showTime.value = false;
}

const onBack = () => {
    proxy.$router.go(-1);
    return;
}
</script>

<style>
@import url('/assets/css/profile.css');

.van-field__button{
    display: flex;
    align-items: center;
}
</style>